<template>
  <!-- !loading -->
  <template v-if="!loading">
    <view class="container u-skeleton" @scroll="handlePageScroll">
      <view class="">
        <!-- 轮播图+分享+价格名称+活动倒计时+优惠券 -->
        <GoodActivityDetail ref="goodActivityDetail" :sku-select="selectedSku" :product-info="productData" :time-active-type="timeActiveType" :mark-tools="markTools" :shop-mark-tools="shopMarkTools" @activityEnd="handleActivityEnd" />

        <!-- 发货 -->
        <view class="pro-info fs24 u-skeleton-fillet">
          <view class="item">
            运费：<text>¥ {{ productData.logisticsPrice || 0 }}</text>
          </view>
          <view class="item">
            库存：<text>{{ productData.surplusNumber }}</text>
          </view>
          <view class="item">
            销量：<text>{{ productData.number }}</text>
          </view>
        </view>

        <!-- 选择SKU -->
        <view class="fs24 chooseSize-box flex-start" @click="handleShowGoodsSkuSelect(6)">
          <view class="chooseSize-content flex justify-between u-skeleton-fillet">
            <view class="flex-row-plus left">
              <label class="fs26 font-color-999">选择</label>
              <view class="valueBox mar-left-20 flex-items flex-1 sku-list">
                <view class="mar-right-10 sku-item" v-for="(item, index) of currentSuk" :key="index">{{ item.skuText || "-" }} </view>
              </view>
            </view>
            <u-icon name="arrow-right" color="#9CA3AF" size="28"></u-icon>
          </view>
        </view>



        <!--  评价  -->
        <GoodEvaluateAndQuestion ref="goodEvaluateAndQuestion" class="u-skeleton-fillet" :product-info="productData" :comment-list="commentList" />
        <!-- 店铺 -->
        <view class="inStore-box flex-items flex-row flex-sp-between u-skeleton-fillet border-box" @click="handleJumpToStore">
          <view class="flex-display flex-row">
            <view>
              <image class="inStore-logo default-img" :src="productData.shopLogo"></image>
            </view>
            <view class="flex-display flex-column mar-left-20">
              <label>{{ productData.shopName }}</label>
              <view class="flex-display flex-row fs24 font-color-999 mar-top-5">
                <label>商品总类：{{ productData.classifyNumber }}</label>
                <label class="mar-left-30">已售：{{ productData.number }}件</label>
              </view>
            </view>
          </view>
          <u-icon name="arrow-right" color="#9CA3AF" size="28"></u-icon>
        </view>
        <view class="goodsDetails-box u-skeleton-fillet">
          <view class="h3-title">商品参数</view>
          <view class="flex items-center justify-between flex-wrap canshu_box" v-if="productData.parameterList && productData.parameterList.length > 0">
            <view class="canshu_item overflow" v-for="(item, index) in productData.parameterList" :key="index">{{ item.parameterKey }}：{{ item.parameterValue }}</view>
          </view>
          <view class="divider_line"></view>
          <view class="h3-title">商品详情</view>
          <view class="goodsDetailsimg-box">
            <view v-for="(item, index) in detailsImgsList" :key="index">
              <image class="img" :src="item" mode="widthFix"></image>
            </view>
          </view>
          <view class="goodsDetailsimg-box">
            <view class="">
              <rich-text :nodes="sellDescList"></rich-text>
            </view>
          </view>
        </view>
      </view>
      <!-- 底部购买 -->
      <view class="buygoods-box">
        <view class="buygoodsBut-box flex-row-plus" :style="{ height: (isIphone === true ? 160 : 130) + 'rpx' }">
          <view class="btns_container">
            <view class="btns flex-column-plus items-center" @click="handleJumpToStore">
              <FullUniIcons type="shop" size="26" color="#4B5563" />
              <!-- <image class="store-icon" :src="`${VUE_APP_STATIC_URL}ui-static/images/storeIcon.png`"></image> -->
              <label class="fs22">店铺</label>
            </view>
            <view class="btns flex-column-plus items-center" @click="handleCollect">
              <FullUniIcons v-if="productData.ifCollect" type="heart-filled" size="26" color="#FF5000" />
              <FullUniIcons v-else type="heart" size="26" color="#4B5563" />
              <label class="fs22">收藏</label>
            </view>
          </view>
          <view class="btns_container">
            <view class="flex-row-plus offShelf" v-if="productData.shelveState === 0"> 商品已下架 </view>
            <view class="flex-row-plus flex-items" v-else>
              <view class="joinShopCartBut" @click="handleShowGoodsSkuSelect(1)">加入购物车 </view>
              <view class="buyNowBut" @click="handleShowGoodsSkuSelect(2)">立即购买 </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 回到顶部 -->
      <ReturnTop :returnTopFlag="returnTopFlag" />
      <!-- SKU选择器 -->
      <GoodSkuSelect ref="skuSelect" :product-data="productData" :selected-sku="selectedSku" @postSelectSku="selectSkuPostProcessor" @getCurrentSku="handleSelectSku" @changeCartNum="num => (allCartNum = num)" @getInitSku="getInitSku" />
      <!-- 骨架屏 -->
      <!--    <Skeleton
              el-color="#efefef"
              bg-color="#fff"
              :loading="isFirstComeIn&&loading"
              :animation="true"
          ></Skeleton>-->
    </view>
  </template>
</template>

<script setup>
import Skeleton from "@/components/Skeleton";
import CombinedSales from "@/components/activities/combinedSales";
import { Services } from "@/utils/services";
import GoodEvaluateAndQuestion from "./components/GoodEvaluateAndQuestion";
import GoodActivityDetail from "./components/GoodActivityDetail";
import GoodSkuSelect from "./components/GoodSkuSelect";
import { TimeFormatting } from "@/utils/timeUtil";
import { request } from "@/utils/request";
import API from "@/config/api";
import { inject, nextTick, onBeforeUnmount, ref } from "vue";
import { onLoad, onPageScroll, onUnload } from "@dcloudio/uni-app";
import { useLoading } from "@/hooks/useLoading";
import { VUE_APP_STATIC_URL } from "@/config/api";
import lodash from "lodash";
import ProductSkeleton from "./components/ProductSkeleton.vue";
import FullUniIcons from "@/component/full-uni-icons";

const $store = inject("$store");
const $getJumpParam = inject("$getJumpParam");
const $jump = inject("$jump");
const $jumpToTabbar = inject("$jumpToTabbar");
// ========================================== ref ==================================================
const goodActivityDetail = ref();
const skuSelect = ref();
const couponPopup = ref();
const goodEvaluateAndQuestion = ref();

// ========================================== data =================================================
const isFirstComeIn = ref(true);
const loading = ref(true);
const isIphone = ref("");
const returnTopFlag = ref(false); // 回到顶部
const productId = ref(""); // 商品ID，有可能屎缓存数据
const productData = ref({}); // 商品详情
const selectedSku = ref({}); // 当前选中SKU
const currentSuk = ref([]); // 选中的SKU（子组件给当前页面做数据渲染）
const buyNum = ref(1); // 当前选取的SKU购买数量
const paramSkuId = ref(null); // skuId
const storeId = ref(""); // 店铺ID
const shopId = ref("");
const commentList = ref([]); // 商品评价列表
const sellDescList = ref(""); // 商品详情长图（富文本）
const detailsImgsList = ref([]); // 商品详情长图（图片组）
const timeActiveType = ref(true); // 是否开启活动（非则预热）
const btnType = ref(1); // 拉起SKU窗口的按钮类型 1加入购物车 2立即购买 3开团 4单独购买 6选择SKU
const allCartNum = ref(0); // 购物车数量
const topLeft = ref(0); // 距离顶部（返回顶部使用）
const pointOption = ref({
  inTime: null,
  data: {
    eventType: 1,
    productIds: "",
  },
}); // 埋点对象

// ================================================ methods ================================================
/**
 * 页面滚动事件
 * @param e
 */
function handlePageScroll(e) {
  topLeft.value = e.scrollTop;
}

// ================================================ SKU相关 ================================================

/**
 * 选取sku
 * @param skuObj:{currentSuk:object,selectedSku:object,buyNum:number}
 */
function handleSelectSku(skuObj) {
  currentSuk.value = skuObj.currentSku;
  selectedSku.value = skuObj.skuItem;
  buyNum.value = skuObj.buyNum;
}

/**
 * 打开SKU弹窗
 * @param type 1加入购物车 2立即购买 6选择SKU
 */
function handleShowGoodsSkuSelect(type) {
  // todo 加入未加载完成拒绝点击逻辑
  if (loading.value) return;
  skuSelect.value.btnType = type;
  skuSelect.value.goodsDetailShowFlag = true;
}

/**
 * 选择sku后置方法
 * 判断有无活动等操作
 */
function selectSkuPostProcessor() {
  const ifEnable = selectedSku.value["ifEnable"];
  timeActiveType.value = ifEnable === 0;
}

/**
 * 活动商品时间到后置方法
 * 供GoodActivityDetail组件调用
 */
function handleActivityEnd() {
  selectedSku.value.activityType = 0;
  location.reload();
}

// ================================================ 跳转相关 ================================================
/**
 * 跳转到购物车
 */
function handleJumpToShopCart() {
  $jumpToTabbar("/pages/tabbar/cart/index");
}

/**
 * 跳转到店铺
 */
function handleJumpToStore() {
  $jump(`../store/index?storeId=${shopId.value}`);
}

const { hideLoading } = useLoading();

/**
 * 获取商品详情
 */
async function handleGetProductDetail() {
  loading.value = true;
  try {
    let postData = {
      shopId: shopId.value,
      productId: productId.value,
      skuId: paramSkuId.value,
      terminal: 1,
    };
    const res = await request(API.QueryProductDetail, postData, "GET");
    if(!res.data || JSON.stringify(res.data) === '{}'){
      uni.showToast({
        title: "商品已下架",
        icon: "none",
      });
      uni.switchTab({
        url: "/pages/tabbar/index/index",
      });
      return false
    }
    isFirstComeIn.value = false;
    loading.value = false;
    productData.value = res.data;
    //处理单规格商品，如果是单款式商品，需要特殊处理productData.names
    const skuCollectionList = productData.value.map;
    const skuCollectionListKeys = Object.keys(skuCollectionList);
    if (skuCollectionListKeys.length === 1 && skuCollectionListKeys[0] === "单款项") {
      productData.value.names[0].values.push({
        skuValue: productData.value.names[0].skuName,
        valueCode: "单款项",
      });
    }

    //如果sku的图像为空，设置为商品的图像
    for (const key in skuCollectionList) {
      if (!skuCollectionList[key].image) {
        skuCollectionList[key].image = productData.value.images[0];
 7     }
    }

    // 评价
    commentList.value = res.data.comments;
    // 宝贝详情
    if(res.data.text.indexOf('http')===0){
      detailsImgsList.value = res.data.text.split('\n');
    } else {
      let result = res.data.text.replace(/(<img[^>]*?)\sstyle=""/gi, "$1");
      sellDescList.value = result.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
    }

    //渲染商详之后，如果参数传了skuId，则选中该skuId，否则选中第一个规格
    // await nextTick(async () => {
    //
    // })
  } finally {
    loading.value = false;
    hideLoading();
  }
}
async function getInitSku() {
  if (paramSkuId.value) {
    skuSelect.value.handleSelectBySkuId(paramSkuId.value);
  } else {
    // 默认选中第0个
    for (const skuRowItem of productData.value.names) {
      skuSelect.value.handleClickSkuItem(skuRowItem.nameCode, skuRowItem.values[0].valueCode);
    }
  }
}

// =============================================== 生命周期 ============================================
onLoad(options => {
  // 页面滚动条归0，不然骨架屏有问题
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 0,
  });
  productData.value = {
    logisticsPrice: 0,
    images: ["", "", ""],
    productName: "....",
    ifCollect: 1,
  };
  selectedSku.value = {
    activityType: 0,
    originalPrice: 0,
  };
  if (options.detail) {
    options = $getJumpParam(options);
  }
  isFirstComeIn.value = true;
  loading.value = true;
  let salesId = null;
  pointOption.value.inTime = new Date().getTime();
  isIphone.value = getApp().globalData.isIphone;
  let item = getApp().globalData.productShareItem;
  if (item) {
    const item = getApp().globalData.productShareItem;
    shopId.value = parseInt(item.shopId);
    productId.value = item.productId;
    paramSkuId.value = item.skuId;
    salesId = parseInt(item.salesId);
    getApp().globalData.productShareItem = undefined;
  } else {
    shopId.value = parseInt(options.shopId);
    productId.value = options.productId;
    paramSkuId.value = options.skuId;
    salesId = parseInt(options.salesId);
  }
  handleGetProductDetail();
  allCartNum.value = uni.getStorageSync("allCartNum");
  if (allCartNum.value > 99) {
    allCartNum.value = "...";
  }
});
onUnload(() => {
  // 判断是否要埋点
  const nowTime = new Date().getTime();
  if (nowTime - pointOption.value.inTime >= 5000) {
    // 埋点
    pointOption.value.data.productIds = productId.value;
    $store.dispatch("doPointer", pointOption.value.data);
  }
  // 销毁平团倒计时计时器
  if (shopGroupWorkTicker.value) {
    clearInterval(shopGroupWorkTicker.value);
    shopGroupWorkTicker.value = null;
  }
});

onBeforeUnmount(() => {
  hideLoading();
});

onPageScroll(e => {
  returnTopFlag.value = e.scrollTop > 600;
  topLeft.value = e.scrollTop;
});

/**
 * 收藏(防抖处理)
 */
const handleCollect = lodash.debounce(() => {
  const { ifCollect, productId } = productData.value;
  if (!ifCollect) {
    request(
      API.collect,
      {
        productId: parseInt(productId),
      },
      "POST"
    ).then(res => {
      // todo 禁止逆向修改PROPS
      productData.value.ifCollect = 1;
      uni.showToast({
        title: "收藏成功",
        icon: "success",
      });
    });
  } else {
    request(
      API.cancelCollect,
      {
        ids: [productId],
      },
      "PUT"
    ).then(res => {
      // todo 禁止逆向修改PROPS
      productData.value.ifCollect = 0;
      uni.showToast({
        title: "取消收藏成功",
        icon: "success",
      });
    });
  }
}, 500);
</script>
<style>
.page {
  background-color: #f7f7f7;
}
</style>
<style scoped lang="scss">
@import "../../style/images";
.page {
  background-color: #f7f7f7;
}

.news-box {
  position: fixed;
  left: 20rpx;
  top: 200rpx;
  z-index: 9999;

  .news-bg {
    width: 450rpx;
    height: 70rpx;
    overflow: hidden;

    .news-item {
      background: rgba(0, 0, 0, 0.75);
      border-radius: 16rpx;
      height: 70rpx;
      color: #ffffff;
      font-size: 24rpx;
      padding: 0 20rpx;
      width: 450rpx;

      .item-avatar {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
    }
  }
}

.tabsbox {
  width: 100%;
  margin-top: 20rpx;
  background-color: #ffffff;
}

.checkimg {
  width: 40rpx;
  height: 40rpx;
  margin-right: 30rpx;
}

.container {
  padding-bottom: 180upx;
  overflow-x: hidden;

  .arrow-icon {
    width: 16rpx;
    height: 24rpx;
  }

  .goodgDes-box {
    background-color: #ffffff;
    width: 100%;
    padding-bottom: 25rpx;

    .priceBuyNum-box {
      width: 677rpx;
      margin-top: 30rpx;
    }

    .nameContainer {
      display: flex;

      .goodsName-box {
        width: 677rpx;
        height: 85rpx;

        .img618-cion {
          width: 70rpx;
          height: 36rpx;
        }
      }

      .collectBox {
        width: 80rpx;
        margin: 0 30rpx 0 15rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .store-icon {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .discounts-box {
      margin-top: 20rpx;

      .discounts-text {
        margin-left: 10rpx;
        color: #ff7800;
        background-color: #ffe4cc;
        padding: 6rpx 12rpx;
        border-radius: 4rpx;
      }
    }

    .activity-box {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-end;
      border-top: 1upx solid #ededed;

      .activity-content {
        width: 614rpx;
        padding-top: 20rpx;

        .activity-text {
          color: #ff7700;
          border: 1rpx solid #ff7700;
          padding: 6rpx 23rpx;
        }

        .coupon-arrow {
          width: 16rpx;
          height: 24rpx;
          margin-left: 15rpx;
        }
      }
    }
  }

  .pro-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    line-height: 40rpx;
    margin: 14rpx 32rpx 0;
    color: #6b7280;
  }

  .chooseSize-box {
    margin: 10rpx auto 46rpx;
    width: 686rpx;
    height: 104rpx;
    background: #f9fafb;
    border-radius: 32rpx 32rpx 32rpx 32rpx;

    .chooseSize-content {
      width: 100%;
      padding-right: 30rpx;
      box-sizing: border-box;
      align-items: center;
      padding-left: 30rpx;
      box-sizing: border-box;
      .left{
        width: 0;
        flex: 1;
        .sku-list{
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          .sku-item{
            white-space: nowrap;
          }
        }
      }
    }
  }

  .questionTit {
    height: 90rpx;
    border-bottom: 1rpx solid #eeeeee;
    margin-right: 35rpx;
    color: #333333;
    font-size: 30rpx;

    .allMoreBox {
      display: flex;
      align-items: center;
      color: #999999;
      font-size: 24rpx;

      .evaluateAllArrow-icon {
        width: 18rpx;
        height: 24rpx;
      }
    }
  }

  .shopEvaList {
    display: flex;
    padding: 30rpx;
    flex-wrap: wrap;
    border-bottom: 20rpx solid #eeeeee;

    .shopEvaItem {
      padding: 0 14rpx;
      height: 60rpx;
      background: #ffe4cc;
      border-radius: 6rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 28rpx;
      color: #666666;
      margin: 0 20rpx 20rpx 0;
    }
  }

  .storeEvaluate-box {
    background-color: #ffffff;
    margin-top: 20rpx;

    .storeEvaluate {
      width: 690rpx;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #ededed;
    }

    .storeEvaluateTag-box {
      margin-top: 10rpx;
      margin-left: 10rpx;
      padding-bottom: 30rpx;
      display: flex;
      flex-wrap: wrap;

      .storeEvaluateTag-text {
        background-color: #ffe4cc;
        border-radius: 6rpx;
        padding: 16rpx 14rpx;
        color: #656565;
        margin-left: 20rpx;
        margin-top: 20rpx;
      }
    }
  }

  .inStore-box {
    background-color: #f9fafb;
    // margin-top: 20rpx;
    padding: 16rpx;
    width: 686rpx;
    margin: 0 auto 32rpx;
    border-radius: 32rpx;

    .inStore-logo {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }
  }

  .goodsDetails-box {
    background-color: #ffffff;
    margin-top: 20rpx;
    // padding: 20rpx 30rpx;

    .h3-title {
      width: 686rpx;
      margin: 36rpx auto 0;
      font-family: Roboto, Roboto;
      font-weight: 500;
      font-size: 36rpx;
      color: #000000;
      line-height: 56rpx;
    }

    .canshu_box {
      width: 686rpx;
      margin: 0 auto;
      padding-bottom: 34rpx;
      .canshu_item {
        margin-top: 24rpx;
        width: 50%;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 28rpx;
        color: #6b7280;
      }
    }

    .divider_line {
      width: 100%;
      height: 2rpx;
      background: #e5e7eb;
    }

    .goodsDetailsimg-box {
      .img{
        display: block;
        width: 100%;
      }
    }
  }

  .priceExplain-box {
    background-color: #ffffff;
    margin-top: 20rpx;
    padding: 20rpx 30rpx;

    .priceExplain-title {
      display: flex;
      flex-direction: row;
      align-items: center;

      .priceExplain-Line {
        width: 265rpx;
        border-bottom: 1rpx solid #ededed;
      }

      .priceExplain-text {
        padding: 0 22rpx;
      }
    }

    .priceExplain-dot {
      width: 9rpx;
      height: 9rpx;
      border: 1rpx solid #ff7700;
      border-radius: 50%;
      background-color: #ff7700;
    }
  }

  .buygoods-box {
    position: fixed;
    bottom: 0rpx;
    box-sizing: border-box;
    z-index: 999;

    .groupByInfo {
      background: #fffbe9;
      padding: 0 30rpx;
      height: 80rpx;

      .groupByInfoBox {
        height: 80rpx;
      }

      .groupByLeft {
        .groupByAvatar {
          margin-right: 15rpx;
        }

        img {
          width: 50rpx;
          height: 50rpx;
        }

        .name {
          font-size: 24rpx;
        }

        .groupByNum {
          margin-right: 10rpx;
        }

        .groupByTime {
          color: #333333;
        }
      }

      .groupByBtn {
        height: 60rpx;
        background: #ff5000;
        color: #ffebc4;
        font-size: 14rpx;
        line-height: 60rpx;
        text-align: center;
        padding: 0 20rpx;
      }
    }

    .buygoodsBut-box {
      background-color: #ffffff;
      width: 750rpx;
      padding: 20rpx 32rpx;
      box-shadow: 0rpx 0rpx 10rpx 1rpx #ededed;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .btns_container {
        display: flex;
        align-items: center;
      }

      .btns {
        width: 80rpx;
      }

      .Cart {
        position: relative;

        .cartAllNum {
          position: absolute;
          width: 30rpx;
          height: 30rpx;
          line-height: 30rpx;
          text-align: center;
          font-size: 17rpx;
          color: #ffffff;
          background: linear-gradient(270deg, #ffa100 0%, #ff9000 100%);
          border-radius: 50%;
          opacity: 1;
          z-index: 999;
        }

        // #ifdef APP-PLUS
        .cartAllNum {
          right: -6rpx;
          top: -6rpx;
        }

        // #endif
        /* #ifdef H5 */
        .cartAllNum {
          right: -10rpx;
          top: -6rpx;
        }

        /* #endif */
        /* #ifdef MP-WEIXIN */
        .cartAllNum {
          right: -3rpx;
          top: 0;
        }

        /* #endif */
      }

      .store-icon {
        width: 48rpx;
        height: 48rpx;
      }

      .joinShopCartBut {
        width: 204rpx;
        height: 72rpx;
        background: linear-gradient(270deg, #ffa100 0%, #ff9000 100%);
        border-radius: 16rpx 0rpx 0rpx 16rpx;
        color: #fff;
        font-size: 28rpx;
        line-height: 72rpx;
        text-align: center;
        box-sizing: border-box;
      }

      .buyNowBut {
        width: 204rpx;
        height: 72rpx;
        background: #ff5000;
        color: #fff;
        font-size: 28rpx;
        line-height: 72rpx;
        text-align: center;
        border-radius: 0rpx 16rpx 16rpx 0rpx;
      }

      .offShelf {
        background: #b7b7b7;
        border-radius: 50rpx;
        width: 360rpx;
        margin-left: 50rpx;
        line-height: 80rpx;
        height: 80rpx;
        justify-content: center;
        color: #333333;
      }
    }
  }
  .parameterShow-box {
    .parameter-title {
      width: 100%;
      text-align: center;
      padding-bottom: 36rpx;
    }

    .parameter-modle {
      width: 690rpx;
      padding-bottom: 36rpx;
      font-size: 26rpx;
    }

    .parameterTruebut-box {
      background-color: #ffffff;
      padding: 20rpx 0;

      .parameterTruebut {
        width: 690rpx;
        height: 80rpx;
        background-image: linear-gradient(135deg, #ffa100 10%, #ff7911 100%);
        color: #ffffff;
        border-radius: 40rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 26rpx;
      }
    }
  }

  .couponShow-box {
    .couponShow {
      z-index: 333;
      height: 1000rpx;

      .couponTitle-box {
        width: 100%;
      }

      .coupon-title-active {
        color: #ff7700;
        border-bottom: 2rpx solid #ff7700;
        padding-bottom: 30rpx;
      }

      .usableCoupon-content {
        padding: 30rpx 0;

        .usableCoupon-box {
          width: 690rpx;
          height: 140rpx;
          border-radius: 10rpx;
          background-color: #ffe9d8;

          .immediateUse-but {
            color: #ff7800;
            border-radius: 30rpx;
            padding: 0 40rpx;
            border-left: 3rpx solid #ebd7c7;
            height: 140rpx;
            border-radius: 60rpx;
            line-height: 140rpx;
            font-weight: bold;
          }
        }
      }
    }
  }

  .succeedShow-box {
    position: absolute;
    top: 220rpx;
    left: 185rpx;

    .succeedShow {
      background-color: #7f7f7f;
      width: 380rpx;
      height: 280rpx;
      border-radius: 10rpx;
      opacity: 0.8;

      .couponSucceedImg {
        width: 200rpx;
        height: 130rpx;
      }
    }
  }
}

.activity-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .title-box {
    width: 100%;
    height: 100upx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: solid 1px #eeeeee;
  }
}

.activity-coupon-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: auto;
  flex: 1;
}

.content-box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 30rpx;
}

.tag-box {
  width: 100%;
  box-sizing: border-box;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #ff7911;
}

.label-lingqu {
  width: 100%;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.coupon-item {
  width: 690rpx;
  height: 120rpx;
  border-radius: 10rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  flex-shrink: 0;
  background-color: #ffe9d8;
}

.money-box {
  width: 160rpx;
  box-sizing: border-box;
  padding-left: 30rpx;
  font-weight: 500;
  color: #ff7911;
}

.info-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: rgba(255, 121, 17, 1);
}

.receive-btn {
  width: 200rpx;
  height: 120rpx;
  background: rgba(255, 233, 216, 1);
  box-shadow: 0px 0px 5rpx 0px rgba(102, 102, 102, 0.35);
  line-height: 120rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: bold;
  color: rgba(255, 121, 17, 1);
  border-bottom-right-radius: 10rpx;
  border-top-right-radius: 10rpx;
  border-top-left-radius: 120rpx;
  border-bottom-left-radius: 120rpx;
}

.received {
  background: #f1f1f1;
  color: #999;
}

.canvas-box {
  display: block;
  position: absolute;
  top: 100rpx;
}

.sceneMarketingBox {
  width: 100%;
  background: $sceneMarketingDetailsIcon no-repeat center;
  padding: 20rpx 30rpx;
  // background-size: cover;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .sceneNameBox {
    width: 220rpx;
    text-align: center;
    color: #ef4444;
    font-size: 20rpx;
  }
}

.goodsDiscount {
  .groupBuy {
    .groupBuyList {
      .groupBuyItem {
        padding: 0 30rpx;
        height: 116rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #eeeeee;

        .leftAvatar {
          display: flex;
          align-items: center;
          width: 50%;

          img {
            width: 72rpx;
            height: 72rpx;
            margin-right: 10rpx;
            border-radius: 50%;
          }
        }

        .rightInfo {
          display: flex;
          align-items: center;
          width: 50%;

          .groupBuyTime {
            .needPeople {
              font-size: 28rpx;
              color: #333333;
              margin-bottom: 10rpx;
              font-weight: 400;

              b {
                color: #c5aa7b;
                font-weight: 400;
              }
            }

            .endDate {
              color: #666666;
            }
          }

          .groupBuyBtn {
            width: 140rpx;
            height: 60rpx;
            line-height: 60rpx;
            background: #ff5000;
            text-align: center;
            color: #ffebc4;
            font-size: 24rpx;
          }
        }
      }
    }
  }
}

.popupDiscount {
  padding-bottom: 70rpx;

  .popupDiscountTit {
    font-size: 36rpx;
    color: #333333;
    height: 105rpx;
    line-height: 105rpx;
    text-align: center;
    border-bottom: 1rpx solid #eeeeee;
  }

  .groupBuy {
    padding-bottom: 80rpx;

    .groupBuyList {
      .groupBuyItem1 {
        padding: 0 30rpx;
        height: 116rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #eeeeee;

        .leftAvatar {
          display: flex;
          align-items: center;

          img {
            width: 72rpx;
            height: 72rpx;
            margin-right: 10rpx;
            border-radius: 50%;
          }

          .groupBuyTime {
            margin-right: 80rpx;
            margin-bottom: 10rpx;
            width: 320rpx;

            .needPeople {
              font-size: 26rpx;
              color: #333333;

              span {
                color: #333333;
                padding-right: 10rpx;
              }

              b {
                color: #c5aa7b;
                font-weight: 400;
              }
            }

            .endDate {
              color: #333333;
              opacity: 0.7;
              font-size: 24rpx;
            }
          }
        }

        .rightInfo {
          display: flex;
          align-items: center;

          .groupBuyBtn {
            width: 140rpx;
            height: 70rpx;
            line-height: 70rpx;
            background: #ff5000;
            text-align: center;
            color: #ffebc4;
            font-weight: 400;
          }
        }
      }
    }
  }
}

.combination {
  padding: 0 20rpx;

  .combinationList {
    width: 100%;
    height: 680rpx;
    background: #ff5000;
    box-shadow: 0 20rpx 30rpx rgba(0, 0, 0, 0.3);
    border-radius: 20rpx;

    .combinationTitle {
      padding: 32rpx 20rpx 0 30rpx;

      image {
        width: 211rpx;
        height: 33rpx;
      }

      .combinationPrice {
        padding: 0 20px;
        height: 50rpx;
        background: linear-gradient(90deg, #c83732 0%, #e25c44 100%);
        box-shadow: 0 6rpx 12rpx rgba(233, 0, 0, 0.3);
        border-radius: 26rpx;
        line-height: 50rpx;
        text-align: center;
        color: #ffffff;
        opacity: 0.8;
      }
    }

    .buyBtn {
      width: 96%;
      height: 84rpx;
      line-height: 84rpx;
      border: 2rpx solid rgba(0, 0, 0, 0);
      background: linear-gradient(88deg, #c5aa7b 0%, #ffebc4 100%);
      text-align: center;
      color: #333333;
      margin: 0 auto;
    }
  }
}
</style>
